<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FDTab test</title>
<style type="text/css">
body{font-size: 12px;}
</style>
<!-- css -->
<link id="fd_theme" href="../../styles/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../styles/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<!-- lib -->
<script type="text/javascript" src="../../src/FDLib/FDLib.js"></script>
<script type="text/javascript" src="../../src/JsMap.js"></script>
<!-- app js -->
<script type="text/javascript" src="../theme.js"></script>
</head>
<body>
<button onclick="selectItemByValue(3)">selectItemByValue(value=3)</button>
<button onclick="selectItemByIndex(1)">selectItemByIndex(index=1)</button>
<button onclick="removeItem()">removeItem(value=1)</button>
<button onclick="removeItemByIndex()">removeItemByIndex(index=0)</button>
<button onclick="setItems()">setItems(设置条目)</button>
<button onclick="addItems()">addItems(增加条目)</button>
<button onclick="hide()">hide</button>
<button onclick="show()">show</button>
<br>
<button onclick="disableByIndex()">disableByIndex(index=0)</button>
<button onclick="enableByIndex()">enableByIndex(index=0)</button>
<div style="border: 1px solid #ccc;">
	onchangeTip:<div id="tip" style="padding: 5px;height: 30px;"></div>
</div>
<br>
<!-- tab定位在这里 -->
<div id="tab1"></div>
<br>
<br>

<!-- tab内容 -->
<div id="tab1-cont1" style="display: none;">
I was a young bachelor then, and Visakhapatnam did not have much to offer. Every Sunday morning, I used to rise before dawn and head for Dolphin’s Nose, to enjoy the dazzling spectacle of the sun majestically rising out of the sea. The fresh, salty sea breeze was a panacea for all the effects of hangovers caused by Saturday night excesses.
</div>
<div id="tab1-cont2" style="display: none;">
那时，我还是一个年轻的单身汉，维萨卡帕特南市对我来说并没有太多好玩的东西。每个周日早晨，我习惯天不亮就起床，前往海豚鼻，享受太阳从海面上庄严升起的壮丽景观。清新又有一丝咸味的海风不啻是一种万能药，能够缓解周六晚上因尽情玩乐而引发的宿醉后的不适感。
</div>

<script type="text/javascript">
FDLib.setDir('../../src/');
var tab1;
FDLib.loadJs('FDTab',function() {
	tab1 = new FDTab({
		domId:'tab1'
		,items:[
		    // contentId值tab内容ID
			{text:'英文',value:1,contentId:'tab1-cont1',closeable:true}
			,{text:'中文',value:2,contentId:'tab1-cont2'}
			,{text:'中文3',value:3,content:'中文3内容'}
			,{text:'中文4',value:4,content:'中文4内容',checked:true}
			,{text:'中文5',value:5,content:'中文5内容'}
			,{text:'中文6',value:6,content:'中文6内容'}
		]
	});
});


function changeHandler(tab,item) {
	FDLib.getEl('tip').innerHTML = item.content;	
}
function setItems() {
	var items = [
	{text:'英文改变后',value:5,content:'<i>英文改变后</i>',closeable:true,checked:true,onchange:changeHandler}
	,{text:'中文改变后',value:6,content:'<b>中文改变后</b>',onchange:changeHandler}        
	             ];
	tab1.setItems(items);
}
function addItems() {
	var items = [
	{text:'英文add后',content:'<i>英文add后</i>',closeable:true,onchange:changeHandler}
	,{text:'中文add后',content:'<b>中文add后</b>',onchange:changeHandler}        
	             ];
	tab1.addItems(items);
}
function show() {
	tab1.show();
}
function hide() {
	tab1.hide();
}
function removeItem() {
	tab1.removeItemByValue(1);
}
function removeItemByIndex() {
	tab1.removeItemByIndex(0);
}
function selectItemByValue(v) {
	tab1.selectItemByValue(v);
}
function selectItemByIndex(i) {
	tab1.selectItemByIndex(i);
}
function disableByIndex() {
	tab1.disableByIndex(0);
}
function enableByIndex() {
	tab1.enableByIndex(0);
}
</script>
</body>
</html>